import React, {PureComponent} from 'react';
import {Table, Alert, Badge, Switch, Icon, InputNumber, Tooltip, Popconfirm,Button} from 'antd';
import styles from './index.less';
import {powerControl} from '../../../utils/powerControl';
const AuthButton = powerControl(Button);

class PaymentConfigruationList extends PureComponent{
    state = {
        selectedRowKeys: [],
        totalCallNo: 0,
        expandedRowKeys: [],
    }

    componentWillReceiveProps(nextProps){
        if (nextProps.selectedRows.length === 0){
            this.setState({
                selectedRowsKeys: [],
                totalCallNo: 0,
            });
        }
    }

    handleEditRow = (record, pagination) => {
        this.props.onEditRow(record, pagination);
    }

    handleTableChange = (pagination, filters, sorter) => {
        this.props.onChange(pagination, filters, sorter);
    }

    handleDelRow = (pay_id, pagination) => {
        this.props.onDelRow(pay_id, pagination);
    };
    onExpandedRowsChange =(expandedRows) =>{

        let expanded = [];
        expandedRows.map(function(k,index){
            if (index === expandedRows.length - 1){
                expanded.push(k);
            }

        });
        this.setState({
            expandedRowKeys: expanded
        })
    }

    render(){
        const {selectedRowKeys, totalCallNo} = this.state;
        const {data: {list, pagination}, loading, expandedRowRender} = this.props;
        const status = ['可用', '不可用'];
        const columns = [
            {
                title: '支付方式编码', dataIndex: 'pay_code', fixed: 'left',
                render: (val, record) =>{
                    return <Tooltip placement="right" title={record.pay_code}>
                        <span>{val}</span>
                    </Tooltip>
                }
            },
            {
                title: '支付方式名称', dataIndex: 'pay_name',
                render: (val, record) => {
                    return <Tooltip placement="right" title={record.pay_name}>
                        <span>{val}</span>
                    </Tooltip>
                }
            },
            {
                title: '支付费用', dataIndex: 'pay_fee',
                render: (val, record) => {
                    return <Tooltip placement="right" title={record.pay_fee}>
                        <span>{val}</span>
                    </Tooltip>
                }
            },
            {
                title: '支付方式描述', dataIndex: 'pay_desc',
                render: (val, record) => {
                    return <Tooltip placement="right" title={record.pay_desc}>
                        <span>{val}</span>
                    </Tooltip>
                }
            },
            {
                title: '显示顺序', dataIndex: 'pay_order',
            },
            {
                title: '配置信息', dataIndex: 'pay_config',
                render: (val, record) => {
                    return <Tooltip placement="right" title={record.pay_config}>
                        <span>{val}</span>
                    </Tooltip>
                }
            },
            {
                title: '是否可用', dataIndex: 'enabled',//是否可用：0否，1是
                render: (val) => {
                    return <Switch checkedChildren={<Icon type="check"/>}
                                   unCheckedChildren={<Icon type="cross"/>}
                                   defaultChecked={val}
                                   checked={val}/>
                },
            },
            {
                title: '是否货到付款', dataIndex: 'is_cod',//是否可用：0否，1是
                render: (val) => {
                    return <Switch checkedChildren={<Icon type="check"/>}
                                   unCheckedChildren={<Icon type="cross"/>}
                                   defaultChecked={val}
                                   checked={val}/>
                },
            },
            {
                title: '是否在线支付', dataIndex: 'is_online',//是否可用：0否，1是
                render: (val) => {
                    return <Switch checkedChildren={<Icon type="check"/>}
                                   unCheckedChildren={<Icon type="cross"/>}
                                   defaultChecked={val}
                                   checked={val}/>
                },
            },
            {
                title: '操作',
                fixed: 'right',
                width:200,
                render: (val, record) => (
                    <p>
                        <AuthButton  ghost  className={styles.btn} size="small"   auth="paymentConfigruation.edit" onClick={() => this.handleEditRow(record, pagination)}>编辑</AuthButton>
                        <span className={styles.splitLine}/>
                        <Popconfirm title="是否确定删除?" onConfirm={() => this.handleDelRow(record.pay_id, pagination)} >
                            <AuthButton auth="paymentConfigruation.delete"  ghost  className={styles.btn} size="small">删除</AuthButton>
                        </Popconfirm>
                    </p>
                ),
            },

        ];

        const rowSelection = {
            onChange: (selectedRowKeys, selectedRows) => {
                console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
            },
            onSelect: (record, selected, selectedRows) => {
                console.log(record, selected, selectedRows);
            },
            onSelectAll: (selected, selectedRows, changeRows) => {
                console.log(selected, selectedRows, changeRows);
            },
        };

        const paginationProps = {
            showSizeChanger: true,
            showQuickJumper: true,
            ...pagination,
        };
        return(
            <div className={styles.standardTable}>
                <Table
                    loading={loading}
                    rowKey={record => record.pay_id}
                    rowSelection={rowSelection}
                    dataSource={list}
                    columns={columns}
                    pagination={paginationProps}
                    onChange={this.handleTableChange}
                    onExpandedRowsChange={this.onExpandedRowsChange}
                    expandedRowKeys={this.state.expandedRowKeys}
                    scroll={{x:2000}}
                >

                </Table>
            </div>

        );
    }
}

export default PaymentConfigruationList;